<template>
  <div class="TOP">
    <h3>机器人销量TOP10(台)</h3>
    <ul>
      <li v-for="(item, index) in sortedData" :key="index">
        <span class="index">{{ index + 1 }}</span>
        <span class="name">{{ item.name }}</span>
        <span class="value">{{ item.value }}</span>
      </li>
    </ul>
  </div>
</template>

<script setup>
import { computed } from "vue";

const data = [
  { name: "广东", value: 20 },
  { name: "天津", value: 30 },
  { name: "辽宁", value: 11 },
  { name: "浙江", value: 50 },
  { name: "北京", value: 115 },
  { name: "上海", value: 156 },
  { name: "深圳", value: 150 },
  { name: "河北", value: 15 },
  { name: "黑龙江", value: 35 },
  { name: "内蒙古", value: 18 },
];

// 排序数据，按照 value 从大到小排序
const sortedData = computed(() => {
  return [...data].sort((a, b) => b.value - a.value);
});
</script>

<style scoped>
h2 {
  margin-bottom: 16px;
}
.TOP {
  margin-top: -11%;
  width: 34%;
  height: 100%;
  /* background-color: red; */
}

ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  display: flex;
  flex-direction: column;
}

li {
  font-size: 18px; /* 调整字体大小 */
  line-height: 2; /* 增加行高，让每行文本看起来更加松散 */
  display: flex; /* 使用 Flexbox 排列 */
  justify-content: space-between; /* 让项之间平均分布 */
  padding: 7px 0; /* 为每个 li 增加上下内边距 */
}

li span {
  padding: 0 16px; /* 为每个 span 添加左右内边距 */
}

.index {
  white-space: nowrap;
  flex: 1; /* 让每个元素都占据相同的空间 */
}

.name {
  white-space: nowrap;
  flex: 2;
}

.value {
  white-space: nowrap;
  flex: 1;
}
</style>
